<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="adm-panel">
			<div class="adm-panel-hd">
				<div class="index-hd">
					<router-link to="/">
						<i class="iconfont icon-home"></i>
					</router-link>
				</div>
				<el-tabs v-model="editableTabsValue" type="card" closable >
					<el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="adm-panel-body scroll ht1">
				<el-row :gutter="50" class="adm-rows">
					<el-col :span="8">
						<router-link to="/" class="flex-center adm-menu-card bg1">
							<div class="icon">
								<img src="../../assets/images/menu1.png" alt="">
							</div>
							<div class="ui-cell__bd">
								<h3>警情档案</h3>
								<p>Police files</p>
							</div>
						</router-link>
					</el-col>
					<el-col :span="8">
						<router-link to="/" class="flex-center adm-menu-card bg2">
							<div class="icon">
								<img src="../../assets/images/menu2.png" alt="">
							</div>
							<div class="ui-cell__bd">
								<h3>行政案卷管理</h3>
								<p>Administrative File </p>
							</div>
						</router-link>
					</el-col>
					<el-col :span="8">
						<router-link to="/" class="flex-center adm-menu-card bg3">
							<div class="icon">
								<img src="../../assets/images/menu3.png" alt="">
							</div>
							<div class="ui-cell__bd">
								<h3>行政复议案卷管理</h3>
								<p>File Management  administrative </p>
							</div>
						</router-link>
					</el-col>
					<el-col :span="8">
						<router-link to="/" class="flex-center adm-menu-card bg4">
							<div class="icon">
								<img src="../../assets/images/menu4.png" alt="">
							</div>
							<div class="ui-cell__bd">
								<h3>刑事案卷管理</h3>
								<p>Criminal file management</p>
							</div>
						</router-link>
					</el-col>
					<el-col :span="8">
						<router-link to="/" class="flex-center adm-menu-card bg5">
							<div class="icon">
								<img src="../../assets/images/menu5.png" alt="">
							</div>
							<div class="ui-cell__bd">
								<h3>刑事复议案卷管理</h3>
								<p>File Management of criminal </p>
							</div>
						</router-link>
					</el-col>
					<el-col :span="8">
						<router-link to="/" class="flex-center adm-menu-card bg6">
							<div class="icon">
								<img src="../../assets/images/menu6.png" alt="">
							</div>
							<div class="ui-cell__bd">
								<h3>刑事复核案卷管理</h3>
								<p>File Management of criminal </p>
							</div>
						</router-link>
					</el-col>
					<el-col :span="8">
						<router-link to="/" class="flex-center adm-menu-card bg7">
							<div class="icon">
								<img src="../../assets/images/menu7.png" alt="">
							</div>
							<div class="ui-cell__bd">
								<h3>国家赔偿案卷管理</h3>
								<p>File Management of state</p>
							</div>
						</router-link>
					</el-col>
					<el-col :span="8">
						<router-link to="/" class="flex-center adm-menu-card bg8">
							<div class="icon">
								<img src="../../assets/images/menu8.png" alt="">
							</div>
							<div class="ui-cell__bd">
								<h3>执法监督案卷管理</h3>
								<p>Law Enforcement Supervision</p>
							</div>
						</router-link>
					</el-col>
					<el-col :span="8">
						<router-link to="/" class="flex-center adm-menu-card bg9">
							<div class="icon">
								<img src="../../assets/images/menu9.png" alt="">
							</div>
							<div class="ui-cell__bd">
								<h3>执法过错案卷管理</h3>
								<p>Law Enforcement Error</p>
							</div>
						</router-link>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				editableTabsValue: '1',
				editableTabs: [{
					title: '卷宗管理',
					name: '1',
				}],
				tabIndex: 1,
				bg:require('../../assets/images/bg.jpg'),
				skin:"skin1"
			}
		
		},
		methods: {
			getData(data) {
				console.log(data)
				if(data ==1){
					this.bg = require('../../assets/images/bg.jpg')
					this.skin = "skin1"
				}else if(data == 2){
					this.skin = "skin2"
					this.bg = require('../../assets/images/bg3.png')
				}else{
					this.skin = "skin3"
					this.bg = require('../../assets/images/bg2.png')
				}
			}
		}
	}
</script>